<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>某某人的歌单</title>
    <link rel="stylesheet" href="../CSS/zhuanji.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>

<body>
    <div class="app">
        <div class="info">
            <div class="content">
                <img v-bind:src="album.songs[0].al.picUrl" alt="">
            </div>
            <div class="cnt">
                <div class="listname">
                    <i>
                        <span style="display: inline-block;
                        padding-top: 15px;
                        padding-left: 10px;">专辑</span>
                    </i>
                </div>
                <div class="tit">
                    <h2>
                        {{album.songs[0].al.name}}
                        <span v-for="item in album.songs[0].al.alia">
                            -{{item}}
                        </span>
                    </h2>
                </div>
                <div class="userface">
                    <div class="username" v-for="(item,index) in album.songs[0].ar">
                        <span v-show="index!=0">
                            /
                        </span>
                        <a href="songerSingle.html" @click="goToSonger(item.id)">
                            <span>
                                {{item.name}}
                            </span>
                        </a>
                    </div>
                    <br>
                    <div class="datetime">
                        <span>
                            {{album.album.publishTime}}
                        </span>
                    </div>
                </div>
                <div class="jieshao">
                    <p>
                        <b>介绍：</b>
                    <ul>
                        <li v-for="item in album.album.showDescription">
                            {{item}}
                        </li>
                        <!-- <li v-for="item in album.album.description.split('\n')">
                            {{item}}
                        </li> -->
                    </ul>
                    </p>
                </div>
            </div>
        </div>
        <div class="playlist">
            <div class="listtit">
                <h3 class="t-sp">
                    <span>歌曲列表</span>
                </h3>
                <p class="t-p">
                    {{album.songs.length}}首歌
                </p>
            </div>
            <div class="listt">
                <table class="l-table">
                    <thead>
                        <tr>
                            <th class="w1">
                                <div class="wp">
                                    &nbsp;
                                </div>
                            </th>
                            <th class="w">
                                <div class="wp af0">
                                    歌曲标题
                                </div>
                            </th>
                            <th class="w2">
                                <div class="wp af1">
                                    时长
                                </div>
                            </th>
                            <th class="w3">
                                <div class="wp af2">
                                    歌手
                                </div>
                            </th>
                        </tr>
                    <tbody>
                        <tr id="一堆数字" class="even" v-for="(item,index) in album.songs">
                            <td class="left">
                                <div class="hd">
                                    <span data-res-id="一堆数字的前几位" class="ply">
                                        &nbsp;
                                    </span>
                                    <span class="num">
                                        {{index+1}}
                                    </span>
                                </div>
                            </td>
                            <td class>
                                <div class="hd1">
                                    <div class="tt">
                                        <div class="ttc">
                                            <span class="txt">
                                                <a href="jutigequ.html" @click="goToSongs(item.id)">
                                                    <b v-bind:title=item.name>
                                                        {{item.name}}
                                                    </b>
                                                </a>
                                                <span v-for="item1 in item.alia">
                                                    -({{item1}})
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="hd2">
                                <span class="u-dur">
                                    {{item.dt}}
                                </span>
                            </td>
                            <td class>
                                <div class="text" title="歌手名" v-for="(item1,index1) in item.ar">
                                    <span v-show="index1!=0">
                                        /
                                    </span>
                                    <span v-bind:title=item1.name>
                                        <a href="songerSingle.html" hidefocus="true" @click="goToSonger(item1.id)">
                                            {{item1.name}}
                                        </a>
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                albumId: "",
                album: {
                    songs: [{
                        ar: [{
                            id: "",       //歌手id
                            name: "",        //歌手名字
                        }],
                        al: {
                            id: "",      //专辑id
                            name: "",        //专辑名字
                            picUrl: "",       //专辑图片
                            alia: [],        //专辑灰色字备注
                        },
                        alia: [],
                        dt: "",      //歌曲时长
                        name: "",        //歌曲名字
                        id: "",      //歌曲id
                    }],
                    album: {
                        publishTime: "",        //专辑发布时间
                        description: "",        //专辑描述
                        company: "",        //发布专辑的公司名字
                        showDescription: "",     //展示的专辑描述
                    }
                },
            },
            methods: {
                get: function () {
                    var that = this;
                    that.albumId = sessionStorage.getItem("albumId");
                    axios.get(
                        "https://autumnfish.cn/album?id=" + this.albumId
                    ).then(function (response) {
                        console.log(response);
                        that.album = response.data;
                        that.album.songs[0].al.picUrl = that.album.songs[0].al.picUrl + "?param=200y200";
                        that.changePublishTime();
                        that.changeSongTime();
                        that.splitDescription();
                    }, function (err) {

                    })
                },
                splitDescription: function () {
                    if (this.album.album.description) {
                        this.album.album.showDescription = this.album.album.description.split('\n');
                    }
                },
                changePublishTime: function () {
                    var t = new Date();
                    t.setTime(this.album.album.publishTime);
                    this.album.album.publishTime = t.toLocaleDateString().replace(/\//g, ".");
                },
                changeSongTime: function () {
                    var time;
                    var minutes;
                    var second;
                    for (var i = 0; i < this.album.songs.length; i++) {
                        time = parseInt(this.album.songs[i].dt / 1000);
                        minutes = parseInt(time / 60);
                        second = time % 60;
                        if (minutes < 10) {
                            minutes = "0" + minutes;
                        }
                        if (second < 10) {
                            second = "0" + second;
                        }
                        this.album.songs[i].dt = minutes + ":" + second;
                    }
                },
                goToSongs: function (songId) {      //给具体歌曲页面传参数
                    var s = new Array();
                    sessionStorage.setItem("songId", songId); //当前点击歌的id
                    for (var i = 0; i < this.album.songs.length; i++) {
                        s[i] = this.album.songs[i].id;
                    }
                    sessionStorage.setItem("gequIdList", JSON.stringify(s));
                },
                goToSonger: function (songerId) {
                    sessionStorage.setItem("songerId", songerId);
                }
            }
        });
        //初始化页面
        app.get();
    </script>
</body>

</html>